<template>
  <div class="commonTable">
    123
    <el-table :data="tableData" border>
      <template v-for="(column, index) in columns">
        <!--          序号列和选择列-->
        <el-table-column
          v-if="column.type && (column.type == 'selection' || column.type == 'index')"
          :width="column.width"
          :type="column.type"
          :label="column.label"
        ></el-table-column>
        <!--          数据列和操作-->
        <el-table-column
          v-else
          :align="'center'"
          :label="column.label"
          :width="column.width"
          show-overflow-tooltip
        >
          <template v-if="!column.type" slot-scope="{ row, $index }">
            <!--              操作列-->
            <slot v-if="column.slot" :index="$index" :name="column.slot" :row="row" />
            <!--              数据列-->
            <span v-else>{{ row[column.prop] }}</span>
          </template>
          
        </el-table-column>
      </template>
    </el-table>
    <CommonPagination
      v-show="pageInfo.total > 0"
      :total="pageInfo.total"
      :page="pageInfo.page"
      :limit="pageInfo.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { scrollTo } from "@/utils/scroll-to";
import CommonPagination from "@/components/CommonPagination"; // secondary package based on el-pagination

export default {
  name: "CommonTable",
  components: {
    CommonPagination,
  },
  props: {
    pageInfo: {
      type: Object,
      default: () => {},
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    console.log(this.columns, this.pageInfo, "sss");
  },
  computed: {},
  methods: {
    getList(v) {
      this.$emit("handlePage", v);
    },
  },
};
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>
